<template>
  <div class="mod-home">
    <div class="show-number">
      <div class="violation-number">
        <div class="title">今日违章次数</div>
        <div class="number">{{ showNumber.violationNumber }}</div>
      </div>
      <div class="fine-number">
        <div class="title">今日罚款金额</div>
        <div class="number">{{ showNumber.fineNumber }}</div>
      </div>
      <div class="repayment-number">
        <div class="title">今日还款金额</div>
        <div class="number">{{ showNumber.repaymentNumber }}</div>
      </div>
      <div class="debt-number">
        <div class="title">今日欠款金额</div>
        <div class="number">{{ showNumber.debtNumber }}</div>
      </div>
    </div>
    <div class="show-chart">
      <div class="date-picker">
        <el-date-picker v-model="dateRange" type="daterange" value-format="yyyy-MM-dd"
                        start-placeholder="开始日期" end-placeholder="结束日期"/>
        <el-button @click="getStatisticData" style="margin-left: 5px">查询</el-button>
      </div>
      <div class="chart">
        <div class="chart-box" id="violation-chart-box" />
        <div class="chart-box" id="fine-chart-box" />
        <div class="chart-box" id="money-chart-box" />
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data () {
    return {
      dateRange: [],
      violationChart: null,
      fineChart: null,
      moneyChart: null,
      showNumber: {
        violationNumber: 0,
        fineNumber: 0,
        repaymentNumber: 0,
        debtNumber: 0
      }
    }
  },
  activated () {
    window.onresize = () => {
      this.violationChart.resize()
      this.fineChart.resize()
      this.moneyChart.resize()
    }
    this.getShowNumber()
    this.getStatisticData()
  },
  methods: {
    getCurrentDate () {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要加1
      const day = String(now.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    // 获取今日的违章次数、罚款金额、还款金额和欠款金额
    getShowNumber () {
      const currDate = this.getCurrentDate()
      // 获取今日违章次数
      this.$http({
        url: this.$http.adornUrl('/mvs/violation/list/number'),
        method: 'get',
        params: this.$http.adornParams({
          'startDate': currDate,
          'endDate': currDate
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.showNumber.violationNumber = data.dataMap.numberList[0]
        } else {
          this.$message.error(data.msg)
        }
      })
      // 获取今日罚款金额
      this.$http({
        url: this.$http.adornUrl('/mvs/ticket/list/fine'),
        method: 'get',
        params: this.$http.adornParams({
          'startDate': currDate,
          'endDate': currDate
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.showNumber.fineNumber = data.dataMap.numberList[0]
        } else {
          this.$message.error(data.msg)
        }
      })
      // 获取今日还款金额
      this.$http({
        url: this.$http.adornUrl('/mvs/payment/list/money'),
        method: 'get',
        params: this.$http.adornParams({
          'startDate': currDate,
          'endDate': currDate
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.showNumber.repaymentNumber = data.dataMap.numberList[0]
        } else {
          this.$message.error(data.msg)
        }
      })
      // 获取今日欠款金额
      this.$http({
        url: this.$http.adornUrl('/mvs/ticket/list/money'),
        method: 'get',
        params: this.$http.adornParams({
          'startDate': currDate,
          'endDate': currDate
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.showNumber.debtNumber = data.dataMap.numberList[0]
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    buildViolationBarChart (boxId, keys, values) {
      const chartBox = document.getElementById(boxId)
      this.violationChart = echarts.init(chartBox)
      const option = {
        title: {
          text: '违章次数',
          left: 'center',
          textStyle: {
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '60',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: keys,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '违章次数',
            type: 'bar',
            // barWidth: '40%',
            barMaxWidth: '20%',
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在顶部显示
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 16
                  },
                  formatter: (obj) => {
                    return obj.value !== 0 ? obj.value : ''
                  }
                }
              }
            },
            data: values
          }
        ]
      }
      this.violationChart.setOption(option)
    },
    buildFineBarChart (boxId, keys, values) {
      const chartBox = document.getElementById(boxId)
      this.fineChart = echarts.init(chartBox)
      const option = {
        color: ['#91cc75'],
        title: {
          text: '罚款金额',
          left: 'center',
          textStyle: {
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '60',
          left: '20',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: keys,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '罚金',
            type: 'bar',
            barMaxWidth: '20%',
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在顶部显示
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 16
                  },
                  formatter: (obj) => {
                    return obj.value !== 0 ? obj.value : ''
                  }
                }
              }
            },
            data: values
          }
        ]
      }
      this.fineChart.setOption(option)
    },
    buildMoneyBarChart (boxId, keys, values1, values2) {
      const chartBox = document.getElementById(boxId)
      this.moneyChart = echarts.init(chartBox)
      const option = {
        color: ['#5877d2', '#91cc75'],
        title: {
          text: '还款与欠款情况',
          left: 'center',
          textStyle: {
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '60',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: keys,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '还款',
            type: 'bar',
            barMaxWidth: '20%',
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在顶部显示
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 16
                  },
                  formatter: (obj) => {
                    return obj.value !== 0 ? obj.value : ''
                  }
                }
              }
            },
            data: values1
          },
          {
            name: '欠款',
            type: 'bar',
            barMaxWidth: '20%',
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在顶部显示
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 16
                  },
                  formatter: (obj) => {
                    return obj.value !== 0 ? obj.value : ''
                  }
                }
              }
            },
            data: values2
          }
        ]
      }
      this.moneyChart.setOption(option)
    },
    // 获取指定日期范围内每日的违章次数
    getViolationNumberList () {
      this.$http({
        url: this.$http.adornUrl('/mvs/violation/list/number'),
        method: 'get',
        params: this.$http.adornParams({
          'startDate': this.dateRange ? this.dateRange[0] : '',
          'endDate': this.dateRange ? this.dateRange[1] : ''
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          const map = data.dataMap
          this.buildViolationBarChart('violation-chart-box', map.dateList, map.numberList)
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 获取指定日期范围内每日的罚款金额
    getFineNumberList () {
      this.$http({
        url: this.$http.adornUrl('/mvs/ticket/list/fine'),
        method: 'get',
        params: this.$http.adornParams({
          'startDate': this.dateRange ? this.dateRange[0] : '',
          'endDate': this.dateRange ? this.dateRange[1] : ''
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          const map = data.dataMap
          this.buildFineBarChart('fine-chart-box', map.dateList, map.numberList)
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 获取指定日期范围内每日的总还款和总欠款
    getPaymentNumberList () {
      this.$http({
        url: this.$http.adornUrl('/mvs/payment/list/money'),
        method: 'get',
        params: this.$http.adornParams({
          'startDate': this.dateRange ? this.dateRange[0] : '',
          'endDate': this.dateRange ? this.dateRange[1] : ''
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          const paymentMap = data.dataMap
          this.$http({
            url: this.$http.adornUrl('/mvs/ticket/list/money'),
            method: 'get',
            params: this.$http.adornParams({
              'startDate': this.dateRange ? this.dateRange[0] : '',
              'endDate': this.dateRange ? this.dateRange[1] : ''
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              const waitMap = data.dataMap
              this.buildMoneyBarChart('money-chart-box', paymentMap.dateList, paymentMap.numberList, waitMap.numberList)
            } else {
              this.$message.error(data.msg)
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    getStatisticData () {
      this.getViolationNumberList()
      this.getFineNumberList()
      this.getPaymentNumberList()
    }
  }
}
</script>

<style scoped lang="scss">
.mod-home {
  width: 100%;
}
.show-number {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 80px;
  margin-bottom: 20px;
  background-color: #eaeaea;
  .title {
    margin-bottom: 5px;
    font-size: 14px;
    color: #888888;
  }
  .number {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
}
.show-chart {
  .chart {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    .chart-box {
      width: 50%;
      height: 300px;
    }
  }
}
</style>
